<template>
    <el-form label-width="auto">
        <div style="margin-top: 20px;">
            <el-form-item style="float: left;">
                <el-button type="primary" @click="open(null)">新增房价计划</el-button>
            </el-form-item>
            <el-form-item label="" style="float: right;">
                <el-select v-model="condtion.roomTypeId" style="width: 140px;" @change="listmoney" clearable>
                    <el-option v-for="item in romlist" :key="item.id" :label="item.roomTypeName" :value="item.id" />
                </el-select>
            </el-form-item>
        </div>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="roomTypeName" label="房型" />
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="breakfirstNum" label="早餐" />
        <el-table-column prop="salesStrategy" label="销售策略" >
            <template v-slot="scope">
                <span v-if="scope.row.salesStrategy">无</span>
                <span v-else>早定优惠</span>
            </template>
        </el-table-column>
        <el-table-column prop="paymentTerm" label="收款方式" >
            <template v-slot="scope">
                <span v-if="scope.row.paymentTerm">预订付费</span>
                <span v-else>到店付费</span>
            </template>
        </el-table-column>
        <el-table-column prop="normalPrice" label="价格" />
        <el-table-column prop="roomState" label="状态" >
            <template v-slot="scope">
                <span v-if="scope.row.roomState">启用</span>
                <span v-else>停用</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
            <template v-slot="scope">
                <el-button v-if="scope.row.roomState" size="small" @click="updromState(scope.row.id,scope.row.roomState)">停用</el-button>
                <el-button v-else size="small" @click="updromState(scope.row.id,scope.row.roomState)">启用</el-button>
                <el-button size="small" @click="open(scope.row)">编辑</el-button>
                <el-button size="small" @click="delmonry(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="logic.isOpen" :title="logic.title" width="500">
        <el-form :model="form" label-width="140">
             <el-form-item label="适用房型">
                <el-select v-model="form.roomTypeName" @change="listmoney" clearable>
                    <el-option v-for="item in romlist" :key="item.id" :label="item.roomTypeName" :value="item.roomTypeName" />
                </el-select>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="form.productName"/>
            </el-form-item>
            <el-form-item label="标准价">
                <el-input v-model="form.normalPrice"/>
            </el-form-item>
            <el-form-item label="收款方式">
                <el-radio-group v-model="form.paymentTerm">
                    <el-radio :value="true">预订付费</el-radio>
                    <el-radio :value="false">到店付费</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="住宿优惠">
                <el-checkbox-group v-model="form.accommodiscounts">
                    <el-checkbox value="可使用优惠券抵扣" name="accommodiscounts">
                        可使用优惠券抵扣
                    </el-checkbox>
                    <el-checkbox value="可使用现金券抵扣" name="accommodiscounts">
                        可使用现金券抵扣
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="早餐份数">
                <el-input v-model="form.breakfirstNum"/>
            </el-form-item>
            <el-form-item label="房量数量">
                <el-input v-model="form.roomNum"/>
            </el-form-item>
            <el-form-item label="销售策略">
                <el-radio-group v-model="form.salesStrategy">
                    <el-radio :value="true">无</el-radio>
                    <el-radio :value="false">早定优惠</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="form.roomState">
                    <el-radio :value="true">启用</el-radio>
                    <el-radio :value="false">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="logic.isOpen = false">取消</el-button>
                <el-button type="primary" @click="addmoney">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { addroomMoney,getroomMoney,getroomType,updromMonystate,updromMony,delromMony } from '@/api/index';
import axios from 'axios';
import { ElMessage,ElMessageBox } from 'element-plus';

const condtion = reactive({
    roomTypeId: null
})

const form = reactive({
    id: null,
    roomTypeName: "",
    productName: "",
    normalPrice: "",
    paymentTerm: true,
    accommodiscount: "",
    accommodiscounts: [],
    breakfirstNum: "",
    roomNum: "",
    salesStrategy: true,
    roomState: true,
    isDeleted: false
})

const logic = reactive({
    isOpen: false,
    title: "",
    isAdd:false
})

const open = (row:any) => {
    if (row == null) {
        logic.isOpen = true;
        logic.title = "新增";
        logic.isAdd = true;
        form.roomTypeName = "";
        form.productName= "";
        form.normalPrice= "";
        form.paymentTerm = true;
        form.accommodiscount= "";
        form.breakfirstNum= "";
        form.roomNum= "";
        form.salesStrategy = true;
        form.roomState= true;
        form.isDeleted = false;
    }
    else {
        logic.isOpen = true;
        logic.title = "编辑";
        logic.isAdd = false;
        // console.log(row);
        form.id=row.id;
        form.roomTypeName=row.roomTypeName;
        form.productName=row.productName;
        form.normalPrice=row.normalPrice;
        form.paymentTerm=row.paymentTerm;
        form.accommodiscounts=row.accommodiscounts;
        form.breakfirstNum=row.breakfirstNum;
        form.roomNum=row.roomNum;
        form.salesStrategy=row.salesStrategy;
        form.roomState=row.roomState;
        form.isDeleted=row.isDeleted;
    }
}

const addmoney = () => {
    form.accommodiscount = form.accommodiscounts.join(",").toString();
    // console.log(form.accommodiscount);
    if (logic.isAdd == true) {
        addroomMoney(form).then(res => {
            // console.log(res);
            if(res.code == 200){
                logic.isOpen = false;
                ElMessage.success("新增成功");
                listmoney();
            }
            else {
                logic.isOpen = false;
                ElMessage.error("新增失败");
            }
        })
    }
    else {
        updromMony(form,form.id).then(res => {
            if(res.code == 200){
                logic.isOpen = false;
                ElMessage.success("修改成功");
                listmoney();
            }
            else {
                logic.isOpen = false;
                ElMessage.error("修改失败");
            }
        })
    }
}

const tableData = ref<any>([]);
const listmoney = () => {
    const roomTypeId = condtion.roomTypeId;
    getroomMoney({ roomTypeId }).then(res => {
       
        tableData.value = res.data;
       
        tableData.value.forEach((item:any) => {
            item.accommodiscounts = item.accommodiscount.split(",");
        })

    })
}


const updromState = (id: any, name: boolean) => {
    
    // console.log(id);
    updromMonystate(id).then(res => {
        if(res.code == 200&&name==false){
            ElMessage.success("启用成功");
            listmoney();
        }
        else if(res.code == 200&&name==true){
            ElMessage.success("停用成功");
            listmoney();
        }
        else {
            ElMessage.error("修改失败");
        }
    })
}


const romlist=ref<any>([]);
const listroomType = () => {
    getroomType().then(res => {
        romlist.value = res.data;
        // console.log(romlist.value);
    })
}

const delmonry = (id:any) => {
    ElMessageBox.confirm(
    '确定要删除该条数据吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        delromMony(id).then(res => {
            if(res.code == 200){
                ElMessage.success("删除成功");
                listmoney();
            }
            else {
                ElMessage.error("删除失败");
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}


onMounted(() => {
    listmoney();
    listroomType();
})
</script>


<style>

</style>